<script setup lang="ts">
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore() // 获取本地缓存

const setPhone = (phoneNumber: string) => {
  if (typeof phoneNumber !== 'string') {
    return ''
  }
  // 如果手机号不是11位，或者不是以数字开头的，直接返回
  if (!/^\d{11}$/.test(phoneNumber)) {
    return phoneNumber
  }
  // 将手机号中间四位数字替换为星号
  return phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
}
</script>

<template>
  <view class="setUserPhone">
    <view class="phone"
      >手机号 <text class="right">{{ setPhone(memberStore.userInfo!.mobile) }}</text></view
    >
    <navigator
      v-if="false"
      class="cancelAccount"
      url="/pagesMy/setUserInfo/cancelAccount"
      hover-class="none"
      >注销账号 <text class="icon-right"></text
    ></navigator>
  </view>
</template>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
  padding: 24rpx;
  .setUserPhone {
    width: 702rpx;

    font-size: 28rpx;
    .phone {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      width: 100%;
      padding: 0 18rpx;
      border-radius: 16rpx;
      background-color: #fff;
      .right {
        color: #00000080;
      }
    }
    .cancelAccount {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      width: 100%;
      margin-top: 20rpx;
      padding: 0 18rpx;
      border-radius: 16rpx;
      background-color: #fff;
      .icon-right {
        color: #00000080;
        font-size: 26rpx;
      }
    }
  }
}
</style>
